<template>
  <div class="medical-packages">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>体检套餐管理</span>
          <el-button type="primary" @click="handleAdd">添加套餐</el-button>
        </div>
      </template>

      <el-table :data="packagesList" border>
        <el-table-column prop="packageId" label="ID" width="80" />
        <el-table-column prop="packageName" label="套餐名称" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="price" label="价格">
          <template #default="{ row }">
            ¥{{ row.price }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="500px"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="套餐名称">
          <el-input v-model="form.packageName" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input-number v-model="form.price" :min="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { queryAll, add, update, deleteById } from '@/api/medicalPackages'

interface MedicalPackage {
  packageId: number
  packageName: string
  description: string
  price: number
  institutionId: number
}

const packagesList = ref<MedicalPackage[]>([])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref<Partial<MedicalPackage>>({})
const isEdit = ref(false)

const loadData = async () => {
  try {
    const res = await queryAll()
    packagesList.value = res.data
  } catch (error) {
    ElMessage.error('获取套餐列表失败')
  }
}

const handleAdd = () => {
  isEdit.value = false
  dialogTitle.value = '添加套餐'
  form.value = {}
  dialogVisible.value = true
}

const handleEdit = (row: MedicalPackage) => {
  isEdit.value = true
  dialogTitle.value = '编辑套餐'
  form.value = { ...row }
  dialogVisible.value = true
}

const handleDelete = (row: MedicalPackage) => {
  ElMessageBox.confirm('确定要删除该套餐吗？', '提示', {
    type: 'warning'
  }).then(async () => {
    try {
      await deleteById(row.packageId)
      ElMessage.success('删除成功')
      loadData()
    } catch (error) {
      ElMessage.error('删除失败')
    }
  })
}

const handleSubmit = async () => {
  try {
    if (isEdit.value) {
      await update(form.value as MedicalPackage)
      ElMessage.success('更新成功')
    } else {
      await add(form.value as Omit<MedicalPackage, 'packageId'>)
      ElMessage.success('添加成功')
    }
    dialogVisible.value = false
    loadData()
  } catch (error) {
    ElMessage.error(isEdit.value ? '更新失败' : '添加失败')
  }
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.medical-packages {
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
